﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Microsoft.FamilyShow"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    x:Class="Microsoft.FamilyShow.PersonInfo"
    MinWidth="800" MinHeight="600" IsVisibleChanged="UserControl_IsVisibleChanged">
  <UserControl.Resources>

    <!-- Converter for displaying the the first name with an apostrophe. -->
    <local:FirstNamePossessiveFormConverter x:Key="FirstNamePossessiveFormConverter"/>

    <local:ImageConverter x:Key="ImageConverter"/>

    <!-- Converter for displaying the "primary" photo text -->
    <local:PrimaryAvatarConverter x:Key="PrimaryAvatarConverter" />

    <Style x:Key="formatTextStyle" TargetType="{x:Type ButtonBase}">
      <Setter Property="FontFamily" Value="Palatino Linotype"/>
      <Setter Property="Width" Value="30"/>
      <Setter Property="FontSize" Value ="14"/>
      <Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"/>
    </Style>

    <Style x:Key="formatImageStyle" TargetType="{x:Type ButtonBase}">
      <Setter Property="Width" Value="30"/>
      <Setter Property="CommandTarget" Value="{Binding ElementName=StoryRichTextBox}"/>
    </Style>

  </UserControl.Resources>

  <Border Margin="10,0,10,10" Style="{DynamicResource BorderStyle}" Background="{DynamicResource BackgroundBrush}">
    <DockPanel x:Name="MainPanel">

      <!-- Header Panel-->
      <DockPanel Margin="10,0,10,0" DockPanel.Dock="Top" Height="30" x:Name="HeaderPanel">
        <!-- Star -->
        <Path StrokeThickness="1.500000" Stroke="#ffffffff" StrokeMiterLimit="1.000000" Fill="#ff3952a3" Data="F1 M 9.816406,1.694336 L 12.351074,6.830078 L 18.018066,7.654297 L 13.918457,11.654297 L 14.886230,17.299805 L 9.816406,14.630859 L 4.746094,17.299805 L 5.713867,11.654297 L 1.611328,7.654297 L 7.281250,6.830078 L 9.816406,1.694336 Z" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Center"/>
        <TextBlock x:Name="NameHeader" Text="{Binding Path=Name, Mode=Default, FallbackValue=Name}" Style="{DynamicResource HeaderStyle}" FontWeight="Bold" Margin="5,0,0,0" VerticalAlignment="Center" Foreground="{DynamicResource HeaderFontColor}"/>
        <Button Width="30" Content="_Back" Click="CloseButton_Click" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" DockPanel.Dock="Right" Height="15" x:Name="CloseButton" IsCancel="True" IsDefault="True" FontSize="10"/>
      </DockPanel>

      <Border CornerRadius="0,0,10,10" x:Name="BodyBorder" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,1,0,0" Background="{DynamicResource PersonInfoBackgroundBrush}">
        <Grid DockPanel.Dock="Top" x:Name="BodyGrid">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.48*"/>
            <ColumnDefinition Width="0.52*"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>

          <!-- Photos Info-->
          <Border x:Name="PhotoInfoBorder" Margin="10,10,5,5">
            <StackPanel>
              <DockPanel Margin="10,0,10,0" x:Name="PhotoButtonsDockPanel">
                <Button x:Name="SetPrimaryButton" Content="Set as _Primary" Click="SetPrimaryButton_Click" IsEnabled="True" IsCancel="False" Width="100" Height="15" FontSize="10"/>
                <Button HorizontalAlignment="Right" x:Name="RemovePhotoButton" Content="_Remove Photo" DockPanel.Dock="Right" Height="15" Click="RemovePhotoButton_Click" IsEnabled="True" Style="{DynamicResource RedButtonStyle}" Width="100" FontSize="10"/>
              </DockPanel>

              <Image x:Name="DisplayPhoto" Source="{Binding Path=Image.Path, Converter={StaticResource ImageConverter}, Mode=Default}" Margin="10,10,10,10" Stretch="Uniform" MaxHeight="280" MinHeight="280"/>
              <TextBlock HorizontalAlignment="Left" MinWidth="100" x:Name="CaptionTextBlock" Margin="10,0,10,0" Foreground="{DynamicResource FontColor}" FontSize="11" FontStyle="Italic" TextTrimming="CharacterEllipsis"/>
              <StackPanel Orientation="Horizontal" x:Name="TagsStackPanel">
                <Label Content="Tags:" FontSize="10" VerticalAlignment="Stretch" Foreground="{DynamicResource AlternateFontColor}" HorizontalAlignment="Stretch" Margin="5,0,0,0"/>
                <ListBox x:Name="TagsListBox" Background="{x:Null}" BorderBrush="{x:Null}" Style="{DynamicResource TagsListStyle}" ItemTemplate="{DynamicResource TagsItemTemplate}" FontSize="11" Margin="0,2,0,0" VerticalAlignment="Bottom" />
              </StackPanel>
            </StackPanel>
          </Border>

          <!-- Photos List Box-->
          <Border x:Name="PhotosBorder" Background="{DynamicResource PhotosBackgroundBrush}" Grid.Row="1" Margin="10,0,5,10" BorderThickness="1,1,1,1" Padding="10,5,10,5" BorderBrush="{DynamicResource BorderBrush}">
            <Grid>
              <TextBlock Text="Drop photos into this box" HorizontalAlignment="Right" Foreground="{DynamicResource AlternateFontColor}" FontSize="10"/>
              <ListBox AllowDrop="True" x:Name="PhotosListBox" Background="{x:Null}" ItemsSource="{Binding Path=Photos, Mode=Default}" IsSynchronizedWithCurrentItem="True" Drop="PhotosListBox_Drop" Style="{DynamicResource PhotosListStyle}" ItemContainerStyle="{DynamicResource PhotosListItemStyle}" SelectionChanged="PhotosListBox_SelectionChanged" Margin="0,15,0,0"/>
            </Grid>
          </Border>

          <!-- Story View -->
          <Border x:Name="StoryViewBorder" Background="{DynamicResource PanelGradientBrush}" Grid.Column="1" Grid.RowSpan="2" Margin="5,10,10,10">
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>
              <DockPanel Margin="10,10,0,0">
                <TextBlock Text="{Binding Path=FirstName, Converter={StaticResource FirstNamePossessiveFormConverter}, Mode=Default, FallbackValue=Firstname}" TextWrapping="Wrap" Style="{DynamicResource HeaderStyle}" FontSize="18" FontWeight="Bold" Margin="5,0,0,0"/>
                <TextBlock Text="Story" TextWrapping="Wrap" Style="{DynamicResource HeaderStyle}" FontSize="18" FontWeight="Bold" Margin="0,0,0,0"/>
                <Button x:Name="EditStoryButton" Content="_Edit" Click="EditStoryButton_Click" HorizontalAlignment="Right" Margin="0,0,10,0" DockPanel.Dock="Right" VerticalAlignment="Top"/>
              </DockPanel>

              <FlowDocumentReader Foreground="{DynamicResource FontColor}" HorizontalAlignment="Stretch" x:Name="StoryViewer" VerticalAlignment="Stretch" Grid.Row="1" Margin="5,0,10,10" MinZoom="50" IsFindEnabled="False" IsPrintEnabled="True" IsTwoPageViewEnabled="False" MaxZoom="150" Background="#00FFFFFF">
                <FlowDocument Foreground="{DynamicResource FlowDocumentFontColor}"/>
              </FlowDocumentReader>
            </Grid>
          </Border>

          <!-- Story Edit -->
          <Border x:Name="StoryEditBorder" Background="{DynamicResource PanelGradientBrush}" Grid.Column="1" Grid.RowSpan="2" Margin="5,10,0,10">
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>
              <DockPanel Margin="10,10,0,0">
                <TextBlock Text="{Binding Path=FirstName, Converter={StaticResource FirstNamePossessiveFormConverter}, Mode=Default, FallbackValue=Firstname}" TextWrapping="Wrap" Style="{DynamicResource HeaderStyle}" FontSize="18" FontWeight="Bold" Margin="5,0,0,0"/>
                <TextBlock Text="Story" TextWrapping="Wrap" Style="{DynamicResource HeaderStyle}" FontSize="18" FontWeight="Bold" Margin="0,0,0,0"/>
                <Button HorizontalAlignment="Right" Margin="0,0,15,0" x:Name="CancelStoryButton" Content="_Cancel" DockPanel.Dock="Right" IsCancel="True" Click="CancelStoryButton_Click" VerticalAlignment="Top"/>
                <Button x:Name="SaveStoryButton" Content="_Save" HorizontalAlignment="Right" Margin="0,0,15,0" DockPanel.Dock="Right" IsDefault="True" Click="SaveStoryButton_Click" VerticalAlignment="Top" />
              </DockPanel>
              <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1" Margin="10,0,10,10">

                <!-- This tool bar contains all the editing buttons. -->
                <ToolBar Name="EditToolBar" Height="30" DockPanel.Dock="Top">

                  <ToggleButton Name="BoldButton" Style="{StaticResource formatTextStyle}" Command="EditingCommands.ToggleBold" ToolTip="Bold">
                    <TextBlock FontWeight="Bold">B</TextBlock>
                  </ToggleButton>
                  <ToggleButton Name="ItalicButton" Style="{StaticResource formatTextStyle}" Command="EditingCommands.ToggleItalic" ToolTip="Italic">
                    <TextBlock FontStyle="Italic" FontWeight="Bold">I</TextBlock>
                  </ToggleButton>
                  <ToggleButton Name="UnderlineButton" Style="{StaticResource formatTextStyle}" Command="EditingCommands.ToggleUnderline" ToolTip="Underline">
                    <TextBlock TextDecorations="Underline" FontWeight="Bold">U</TextBlock>
                  </ToggleButton>
                  
                  <ComboBox Name="FontsComboBox" Width="150" SelectionChanged="FontsComboBox_SelectionChanged" />

                  <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.IncreaseFontSize" ToolTip="Grow Font">
                    <Image Source="..\Images\CharacterGrowFont.png"/>
                  </Button>
                  <Button Style="{StaticResource formatImageStyle}" Command="EditingCommands.DecreaseFontSize" ToolTip="Shrink Font">
                    <Image Source="..\Images\CharacterShrinkFont.png"/>
                  </Button>

                  <ToggleButton Name="BulletsButton" Style="{StaticResource formatImageStyle}" Command="EditingCommands.ToggleBullets" ToolTip="Bullets">
                    <Image Source="..\Images\ListBullets.png"/>
                  </ToggleButton>
                  <ToggleButton Name="NumberingButton" Style="{StaticResource formatImageStyle}" Command="EditingCommands.ToggleNumbering" ToolTip="Numbering">
                    <Image Source="..\Images\ListNumbering.png"/>
                  </ToggleButton>
                  
                  <ToggleButton Name="AlignLeftButton" Style="{StaticResource formatImageStyle}" Command="EditingCommands.AlignLeft" ToolTip="Align Left">
                    <Image Source="..\Images\ParagraphLeftJustify.png"/>
                  </ToggleButton>
                  <ToggleButton Name="AlignCenterButton" Style="{StaticResource formatImageStyle}" Command="EditingCommands.AlignCenter" ToolTip="Align Center">
                    <Image Source="..\Images\ParagraphCenterJustify.png"/>
                  </ToggleButton>
                  <ToggleButton Name="AlignRightButton" Style="{StaticResource formatImageStyle}" Command="EditingCommands.AlignRight" ToolTip="Align Right">
                    <Image Source="..\Images\ParagraphRightJustify.png"/>
                  </ToggleButton>
                  <ToggleButton Name="AlignFullButton" Style="{StaticResource formatImageStyle}" Command="EditingCommands.AlignJustify" ToolTip="Align Justify">
                    <Image Source="..\Images\ParagraphFullJustify.png"/>
                  </ToggleButton>
                </ToolBar>

                <Border BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource LightBrush}" BorderThickness="1,1,1,1">
                  <RichTextBox x:Name="StoryRichTextBox" Grid.RowSpan="1" AcceptsTab="True" 
                    SelectionChanged="StoryRichTextBox_SelectionChanged" TextChanged="StoryRichTextBox_TextChanged" />
                </Border>
              </DockPanel>
            </Grid>
          </Border>

        </Grid>
      </Border>
      
    </DockPanel>
  </Border>
</UserControl>
